import React from 'react';
import {observer, inject} from 'mobx-react';

import {AsideNav, Button} from 'amis';
import {Link} from 'react-router-dom';
import {IMainStore} from '../../store';

import '@fortawesome/fontawesome-free/css/all.css'
import {IMenu} from "../../store/MenuStore";

export default inject('store')(
    observer(function ({store}: { store: IMainStore }) {

        const toNav = (menu: IMenu) => {
            let nav = {
                active: store.pageManageStore.menuIdSelected == menu.id,
                label: menu.label,
                path: menu.path,
                icon: menu.icon,
                children: [],
                data: menu,
            }
            if (menu.children && menu.children.length > 0) {
                nav.children = menu.children.map((sub: IMenu) => toNav(sub))
            }
            return nav;
        }

        const navigations = store.pageManageStore.menuStore.menus.map(item => toNav(item))

        return (
            <AsideNav
                key={store.asideFolded ? 'folded-aside' : 'aside'}
                navigations={[
                    {
                        label: '导航',
                        children: navigations
                    }
                ]}

                renderLink={({link, toggleExpand, classnames: cx, depth}: any) => {
                    if (link.hidden) {
                        return null;
                    }
                    return (
                        <Link to={link.path[0] === '/' ? link.path : `${link.path}`}
                              onClick={() => store.pageManageStore.selectMenu(link.data.id)}>
                            {link.children && link.children.length > 0 ? (
                                <i onClick={e => {
                                    toggleExpand(link)
                                    e.stopPropagation();
                                    e.preventDefault();
                                }} key="icon"
                                   className={cx(`AsideNav-itemIcon`, link.open ? 'fas fa-angle-down' : 'fas fa-angle-right')}/>
                            ) : <i className={cx(`AsideNav-itemIcon`, 'fas fa-file')}/>}
                            <span key="label" className={cx('AsideNav-itemLabel')}>
                                {link.label}
                            </span>
                        </Link>
                    )
                }}
            />
        );
    })
);
